<template>
  <div class="PositionInfo">
    <span>光标坐标：{{ lngCursor }}，{{ latCursor }}，{{ heightCursor }}</span>
    <span>相机坐标：{{ lngCamera }}，{{ latCamera }}，{{ heightCamera }}</span>
    <span>相机角度：水平{{ headingCamera }}，上下{{ pitchCamera }}</span>
    <span>瓦片坐标 ：{{ tileX }}，{{ tileY }}，{{ tileL }}</span>

    <!--    <div class="m-l-10">-->
    <!--      <span>H:</span>-->
    <!--      <span>{{ positionInfo.height }}</span>-->
    <!--    </div>-->
  </div>
</template>

<script>
export default {
    name: 'PositionInfo',
    data() {
        return {
            lngCursor: 0,
            latCursor: 0,
            heightCursor: 0,
            lngCamera: 0,
            latCamera: 0,
            heightCamera: 0,
            headingCamera: 0,
            pitchCamera: 0,
            rollCamera: 0,
            tileX: 0,
            tileY: 0,
            tileL: 0
        }
    },
    mounted() {
        this.$nextTick(() => {
            // this.initPosEvent()
            // this.initCamera()
        })
    },
    methods: {
        initPosEvent() {
            const viewer = this.$viewer
            var eventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
            eventHandler.setInputAction(movement => {
                // 捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
                var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid)
                if (cartesian) {
                    // 将笛卡尔三维坐标转为地图坐标（弧度）
                    var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
                    this.lngCursor = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5)
                    // 将地图坐标（弧度）转为十进制的度数
                    this.latCursor = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5)
                    if (viewer.scene.globe.getHeight(cartographic)) {
                        this.heightCursor = viewer.scene.globe.getHeight(cartographic).toFixed(0)
                    }

                    // this.height = (viewer.camera.positionCartographic.height).toFixed(2)
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
            this.$viewer.scene.preRender.addEventListener(this.initCamera)
        },
        initCamera() {
            const viewer = this.$viewer
            this.lngCamera = (Cesium.Math.toDegrees(viewer.camera.positionCartographic.longitude)).toFixed(5)

            this.latCamera = (Cesium.Math.toDegrees(viewer.camera.positionCartographic.latitude)).toFixed(5)
            this.heightCamera = (viewer.camera.positionCartographic.height).toFixed(0)
            this.headingCamera = Cesium.Math.toDegrees((viewer.camera.heading)).toFixed(0)
            this.pitchCamera = Cesium.Math.toDegrees((viewer.camera.pitch)).toFixed(0)
            this.rollCamera = Cesium.Math.toDegrees((viewer.camera.roll)).toFixed(0)
        }
    }
}
</script>

<style scoped>
    .PositionInfo {
        position: absolute;
        /*height: 30px;*/
        bottom: 5px;
        right: 5px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: self-start;
    }
</style>
